<script setup>
import { ref,getCurrentInstance,onMounted,reactive } from 'vue'
import * as echarts from 'echarts'
//这里相当于vue2里面的$bus
// getCurrentInstance():
// 这个函数返回当前组件实例的引用。它只能在 setup() 中调用，用来访问当前组件的内部状态和其他信息。
// proxy:
// getCurrentInstance() 返回的对象中有一个 proxy 属性，它是 Vue 实例的一个代理对象。这个代理对象可以访问当前组件的 data、computed、methods 等，并且是响应式的。
const {proxy} = getCurrentInstance()

    const getImageUrl = (user) => {
            return new URL(`../assets/images/${user}.png`,import.meta.url).href
        }
        
    const observer = ref(null)
    const tableData = ref([])
    const CountData = ref([])
    const ChartData = ref([])
        
    const tableLabel = ref({
        name: "课程",
        todayBuy: "今日购买",
        monthBuy: "本月购买",
        totalBuy: "总购买",
    })

//这个是折线图和柱状图 两个图表共用的公共配置
//echarts官网上的表
const xOptions = reactive({
      // 图例文字颜色
      textStyle: {
        color: "#333",
      },
      legend: {},
      grid: {
        left: "20%",
      },
      // 提示框
      tooltip: {
        trigger: "axis",
      },
      xAxis: {
        type: "category", // 类目轴
        data: [],
        axisLine: {
          lineStyle: {
            color: "#17b3a3",
          },
        },
        axisLabel: {
          interval: 0,
          color: "#333",
        },
      },
      yAxis: [
        {
          type: "value",
          axisLine: {
            lineStyle: {
              color: "#17b3a3",
            },
          },
        },
      ],
      color: ["#2ec7c9", "#b6a2de", "#5ab1ef", "#ffb980", "#d87a80", "#8d98b3"],
      series: [],
})
const pieOptions = reactive({
  tooltip: {
    trigger: "item",
  },
  legend: {},
  color: [
    "#0f78f4",
    "#dd536b",
    "#9462e5",
    "#a6a6a6",
    "#e1bb22",
    "#39c362",
    "#3ed1cf",
  ],
  series: []
})

    const getTableData = async () => {
      const data = await proxy.$api.getTableData()
      tableData.value = data.tableData
    }

    const getCountData = async () => {
      const data = await proxy.$api.getCountData()
      CountData.value = data
    }

    const getChartData = async () => {
      const {orderData,userData,videoData} = await proxy.$api.getChartData()
      // 对第一个表格进行x轴  和 series的赋值
// 在 ECharts 中，series 是一个数组，表示图表中的数据系列。每个数据系列可以包含不同类型的图表（例如柱状图、折线图、饼图等），以及这些图表的相关数据。series 数组中的每一项都定义了一个独立的数据系列，可以有不同的显示方式和样式。
      xOptions.xAxis.data = orderData.date
      // Object.keys(orderData.data[0]) 会返回这个对象的所有字段（即每个列的名称）。例如，如果数据是 { a: 10, b: 20, c: 30 }，返回的结果是 ['a', 'b', 'c']。
      xOptions.series = Object.keys(orderData.data[0]).map(val => {
         return{
            name:val,
            data:orderData.data.map(item => item[val]),
            type:'line'
         }
      })
      const oneEchart = echarts.init(proxy.$refs['echart'])
      oneEchart.setOption(xOptions)
// setOption(xOptions)：是用来设置图表的配置项的函数。xOptions 是一个包含图表配置信息的对象，通常包括图表的标题、系列数据、坐标轴、图例、样式等内容。使用 setOption 方法，ECharts 会根据这些配置项重新渲染图表。

      //对第二个表格(柱状图)进行渲染
      xOptions.xAxis.data = userData.map(item => item.date)
      xOptions.series = [
         {
            name:'新增用户',// 每个字段名作为 series 的 name
            data:userData.map(item => item.new),// 对每个数据项取出对应字段的值
            type:'bar' // 设置类型为 line，表示折线图
         },
         {
            name:'活跃用户',
            data:userData.map(item => item.active),
            type:'bar'
         },
      ]
      const twoEchart = echarts.init(proxy.$refs['userEchart'])
      twoEchart.setOption(xOptions)
      
      //对第三个表格(饼状图)进行渲染
      pieOptions.series = [
         {
            data:videoData,
            type:'pie'
         }
      ]
      const threeEchart = echarts.init(proxy.$refs['videoEchart'])
      threeEchart.setOption(pieOptions)

      //监听页面的变化来改变窗口的视图，获得更好的视觉体验
      //ResizeObserver:如果监听的容器大小发生变化，改变了以后，会执行回调函数
//       这一行创建了一个新的 ResizeObserver 实例，并将其赋值给 observer.value。ResizeObserver 是一种浏览器原生的 API，用于监听元素的尺寸变化（包括宽度和高度的变化）。传递给 ResizeObserver 的回调函数将在目标元素的尺寸发生变化时被触发。
// 在回调函数中，oneEchart.resize()、twoEchart.resize() 和 threeEchart.resize() 分别是对三个 ECharts 图表实例的 resize() 方法进行调用。通常，ECharts 图表在容器大小发生变化时需要手动调用 resize() 方法来调整图表的大小，以适应新的容器尺寸。
      observer.value = new ResizeObserver(()=> {
         oneEchart.resize()
         twoEchart.resize()
         threeEchart.resize()
      })

      //容器存在
      if(proxy.$refs['echart']){
         observer.value.observe(proxy.$refs['echart'])
         //这里监听上面最大的那个容器就行了
      }
    }

    onMounted(() => {
      getTableData()
      getCountData()
      getChartData()
    })

</script>

<template>
    <div>
        <el-row class="home" :gutter="20">
            <el-col :span="8" style="margin-top: 20px;">
                <el-card shadow="hover">
                    <div class="user">
                        <img :src="getImageUrl('user')" class="user"/>
                        <p class="user-info-admin">Admin</p>
                        <p class="user-info-p">超级管理员</p>
                    </div>
                    <div class="login-info">
                        <p>上次登录时间:<span>2021-09-09 09:09:09</span></p>
                        <p>上次登录地点:<span>河南</span></p>
                    </div>
                </el-card>
                <el-card shadow="hover" class="user-table">
                    <el-table :data="tableData">
                        <el-table-column
                            v-for="(item, key) in tableLabel"
                            :key="key"
                            :prop="key"
                            :label="item"
                        ></el-table-column>
                    </el-table>
                </el-card>
            </el-col>

            <el-col :span="16" style="margin-top: 20px;">
               <div class="num">
                  <el-card 
                  :body-style="{display:'flex',padding:0}"
                  v-for="item in CountData"
                  :key="item.name"
                  >
                  <component :is="item.icon" class="icons" :style="{background:item.color}"></component>
                  <div class="detail">
                     <p class="num">￥{{item.value}}</p>
                     <p class="txt">￥{{item.name}}</p>
                  </div>
                  </el-card>
               </div>
               <el-card class="top-echart">
                  <div ref="echart" style="height: 280px;">
                  </div>
               </el-card>
               <div class="graph">
                  <el-card>
                     <div ref="userEchart" style="height: 240px;">
                     </div>
                  </el-card>
                  <el-card>
                     <div ref="videoEchart" style="height: 240px;">
                     </div>
                  </el-card>
               </div>
            </el-col>

        </el-row>
    </div>

</template>

<style scoped lang="less">
  .home{
   height:100%;
   overflow:hidden;
   .user{
      display:flex;
      align-items:center;
      border-bottom:1px solid #ccc;
      margin-bottom:20px;
      img{
         width:150px;
         height:150px;
         border-radius:50%;
         margin-right:40px; 

      }
      .user-info{
         p{
            line-height:40px;
         }
         .user-info-p{
            color:#999;
         }
         .user-info-admin{
            font-size:35px
         }
      }
   }
   .login-info{
      p{
         line-height:30px;
         font-size:14px;
         color:#999;
         span{
            color:#666;
            margin-left:60px;
         }
      }
   }
   .user-table{
      margin-top:20px;
   }
   .num{
      display:flex;
      flex-wrap:wrap;
      justify-content:space-between;
      .el-card{
         width:32%;
         margin-bottom:20px;
      }
      .icons{
         width:80px;
         height:80px;
         font-size:30px;
         text-align:center;
         line-height:80px;
         color:#fff;
      }
      .detail{
         margin-left:15px;
         display:flex;
         flex-direction:column;
         justify-content:center;
         .num{
            font-size:30px;
            margin-bottom:10px
         }
         .txt{
            font-size:15px;
            text-align:center;
            color:#999;
         }
      }
   }
   .graph{
      margin-top:20px;
      display:flex;
      justify-content:space-between;
      .el-card{
         width:48%;
         height:260px;
      }
   }
  }
</style>